<template>
  <div class="container">
    <!-- 预览文章弹框 -->
    <el-dialog title="预览文章" :visible="closedialogVisible" @close="dialogClose" width="58%">
      <div class="title">
        <h2>{{ Form.title }}</h2>
      </div>
      <div class="time">
        <span>{{ formatTime(Form.createTime) }}</span>
        <span>超级管理员</span>
        <i class="el-icon-view"></i>
        <span>{{ Form.visits }}</span>
      </div>
      <div class="content">
        <span v-html="Form.articleBody"></span>
        <img src="" class="image" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles.js'
import dayjs from 'dayjs'

export default {
  data () {
    return {
      Form: {
        title: '',
        articleBody: '',
        videoURL: ''
        // id: ''
      }
    }
  },
  props: {
    // data: {
    //   type: Object,
    //   default: () => {}
    // },
    closedialogVisible: {
      type: Boolean,
      required: true
    }
  },
  mounted () {
    // this.preview()
  },
  methods: {
    // 弹窗
    dialogClose () {
      this.$emit('dialogClose')
    },
    // 预览文章
    async preview (id) {
      // this.$emit('openadddialog')
      const res = await detail({ id })
      console.log(res, id)
      this.Form = res.data
    },
    // async detailarticles (data) {
    //   // this.closedialogVisible = true
    //   this.$emit('dialogClose')
    //   console.log(data)
    //   const res = await detail(data.id)
    //   console.log(res)
    //   this.Form = res.data
    // },
    // 时间
    formatTime (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang='less'>
.addskill{
  margin-left: 500px;
}
.el-dialog{
  padding: 0 20px;
}
.title{
  padding-bottom: 10px;
  h2{
    margin: 0;
  }
}
.time{
  height: 25px;
  span,i{
    margin-left: 10px;
  }
}
.content{
  border-top: 1px dashed #ccc;
  padding: 10px;
  background: #f5f5f5;
}
</style>
